<p><code>interactive</code> - Configure which of the default interactions with elements and links should be enabled.</p>

<p>The property value defaults to <code>{ labelMove: false }</code>. This can be overwritten in three ways: with a boolean value, with an object specifying interaction keys, or with a function.</p>

<p>If set to <code>false</code>, all interactions with elements and links are disabled. If set to <code>true</code>, all interactions are enabled.</p>

<pre><code>// disable all interaction
var paper = new joint.dia.Paper({
    // ...
    interactive: false,
});

// enable all interaction (including labelMove)
var paper = new joint.dia.Paper({
    // ...
    interactive: true,
});</code></pre>

<p>Using an object, specific interactions may be disabled by assigning <code>false</code> to their corresponding property name. It is not necessary to pass <code>true</code> values; all omitted properties are assigned <code>true</code> by default. (Note that the passed object is not merged with the default; unless <code>labelMove</code> is explicitly excluded, it becomes enabled.) A full list of recognized interaction keys is provided below.</p>

<pre><code>// disable arrowheadMove
var paper = new joint.dia.Paper({
    // ...
    interactive: { arrowheadMove: false }
});

// disable all element interactions
var paper = new joint.dia.Paper({
    // ...
    interactive: { elementMove: false, addLinkFromMagnet: false }
});</code></pre>

<p>If defined as a function, the function is passed <code>cellView</code> (the elementView/linkView the user is about to interact with) as the first parameter, followed by the name of the event (<code>'pointerdown'</code>, <code>'pointermove'</code>, ...) that triggered the interaction. The return value of the function is then interpreted in the way specified above (<code>false</code> causes all interaction to be disabled, an object disables specific interactions, etc.).</p>

<pre><code>// disable link interactions for cellViews when a custom property is set
var paper = new joint.dia.Paper({
    // ...
    interactive: function(cellView) {
        if (cellView.model.get('disableLinkInteractions')) {
            return {
                linkMove: false,
                labelMove: false,
                arrowheadMove: false,
                vertexMove: false,
                vertexAdd: false,
                vertexRemove: false,
                useLinkTools: false,
            };
        }

        // otherwise
        return true;
    }
});</code></pre>

<p>The example below has all interactions on the link and on the elements enabled. This is the default behavior:</p>

<iframe src="about:blank" data-src="./demo/dia/Paper/interactive/enableAll.html" style="height: 94px; width: 400px;"></iframe>

<p>The following tables present a list of all recognized interaction keys, followed by an example of a paper with only the related interactive property set to <code>true</code> (and all other properties set to <code>false</code>).</p>

<p><b>Links:</b></p>

<table>
    <tr>
        <th valign="top">linkMove</th>
        <td>
            <p>Is the user allowed to move the link?</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/linkMove.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
    <tr>
        <th valign="top">labelMove</th>
        <td>
            <p>Is the user allowed to move the link label?</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/labelMove.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
    <tr>
        <th valign="top">arrowheadMove</th>
        <td>
            <p>Deprecated. Use a <a href="#linkTools">link tool</a> instead.</p>
            <p>(Is the user allowed to move the arrowheads?)</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/arrowheadMove.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
    <tr>
        <th valign="top">vertexMove</th>
        <td>
            <p>Deprecated. Use a <a href="#linkTools">link tool</a> instead.</p>
            <p>(Is the user allowed to move the vertices?)</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/vertexMove.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
    <tr>
        <th valign="top">vertexAdd</th>
        <td>
            <p>Deprecated. Use a <a href="#linkTools">link tool</a> instead.</p>
            <p>(Is the user allowed to add vertices by clicking along the link path?)</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/vertexAdd.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
    <tr>
        <th valign="top">vertexRemove</th>
        <td>
            <p>Deprecated. Use a <a href="#linkTools">link tool</a> instead.</p>
            <p>(Is the user allowed to remove vertices?)</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/vertexRemove.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
    <tr>
        <th valign="top">useLinkTools</th>
        <td>
            <p>Deprecated.</p>
            <p>(Is the user allowed to use the default link buttons?)</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/useLinkTools.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
</table>

<p><b>Elements:</b></p>

<table>
    <tr>
        <th valign="top">elementMove</th>
        <td>
            <p>Is the user allowed to move the element?</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/elementMove.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
    <tr>
        <th valign="top">addLinkFromMagnet</th>
        <td>
            <p>Is the user allowed to add connections from magnets/ports?</p>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/addLinkFromMagnet.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
</table>

<p>The <code>stopDelegation</code> option is special. If it is <code>true</code> (default), the element's <code>elementMove</code> option determines whether the element responds to user drag.</p>

<p>However, if <code>stopDelegation</code> is <code>false</code> and the element is embedded within a parent, the user's dragging is delegated to the embedding parent. The parent's <code>elementMove</code> option then determines whether both elements respond to user drag. The behavior is recursive. If the embedding parent has <code>stopDelegation: false</code>, it delegates to its own embedding parent's <code>elementMove</code> option and so on. If all children within an embedding have <code>stopDelegation</code> set to <code>false</code>, then no matter which element is dragged by the user, the whole embedding is dragged.</p>

<p>If the element is not embedded within an element, the <code>stopDelegation</code> option is ignored (treated as <code>true</code>). There is no other element to delegate to. Then <code>elementMove</code> determines whether the element responds to user drag.</p>

<p>In the following example, both embedded elements have <code>stopDelegation: false</code>. Thus, when the embedded element is dragged by the user, the parent ancestor (<q>Movable</q>) is dragged instead. When the parent ancestor has <code>elementMove</code> disabled (<q>Not movable</q>), nothing happens.</p>

<table>
    <tr>
        <th valign="top">stopDelegation</th>
        <td>
            <iframe src="about:blank" data-src="./demo/dia/Paper/interactive/stopDelegation.html" style="height: 94px; width: 250px;"></iframe>
        </td>
    </tr>
</table>
